<template>
	<div class="factory-info">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item>工厂--工厂介绍</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-form :model="infoForm" :rules="infoFormRules" ref="infoForm" label-width="120px">
				<div class="content-info">
					<h3>工厂转账信息：</h3>
					<!-- <el-form-item label="预付款:">
						<el-input v-model.number="infoForm.advance_charge" placeholder="请输入预付款" clearable></el-input>
					</el-form-item> -->
					<el-form-item label="银行账号:">
						<el-input v-model="infoForm.bank_account" placeholder="请输入银行账号" clearable=""></el-input>
					</el-form-item>
					<el-form-item label="收款方账户名:">
						<el-input v-model="infoForm.bank_account_name" placeholder="请输入收款方账户名" clearable=""></el-input>
					</el-form-item>
					<el-form-item label="开户行:">
						<el-input v-model="infoForm.bank_deposit" placeholder="请输入开户行" clearable=""></el-input>
					</el-form-item>
					<!-- <el-form-item label="开户行地址:">
						<el-input v-model="infoForm.bank_address" placeholder="请输入开户行地址" clearable=""></el-input>
					</el-form-item>
					<el-form-item label="结算类型:">
						<el-select v-model="infoForm.pay_type">
							<el-option v-for="item in payTypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="开户行类型:">
						<el-select v-model="infoForm.bank_type">
							<el-option v-for="item in bankTypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
						</el-select>
					</el-form-item> -->
					<el-divider></el-divider>
					<h3>工厂基本信息：</h3>
					<el-form-item label="品牌名称:" prop="factory_name">
						<el-input v-model="infoForm.factory_name" placeholder="请输入品牌名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="企业名称:" prop="name">
						<el-input v-model="infoForm.name" placeholder="请输入企业名称" clearable></el-input>
					</el-form-item>
					<el-form-item label="风格编号:" prop="factory_style_sn">
						<el-input v-model="infoForm.factory_style_sn" placeholder="请输入风格" clearable></el-input>
					</el-form-item>
					<!-- <el-form-item label="风格名称:" prop="style">
						<el-input v-model="infoForm.style" placeholder="请输入风格" clearable></el-input>
					</el-form-item> -->
					<el-form-item label="联系人:" prop="contacts_name">
						<el-input v-model="infoForm.contacts_name" placeholder="请输入联系人" clearable></el-input>
					</el-form-item>
					<el-form-item label="联系电话:" prop="phone">
						<el-input v-model="infoForm.phone" placeholder="请输入联系电话" clearable></el-input>
					</el-form-item>
					
					<!-- <el-form-item label="子公司列表:" v-if="!is_subsidiary_corporation">
						<el-select v-model="infoForm.filiale_id">
							<el-option v-for="item in filialeList" :key="item.filiale_id" :label="item.name" :value="item.filiale_id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="类型:" prop="type" v-if="!is_subsidiary_corporation">
						<el-select v-model="infoForm.type" placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自营价系数:" prop="self_coefficient">
						<el-input v-model="infoForm.self_coefficient" placeholder="请输入自营价系数" clearable></el-input>
					</el-form-item>
					<el-form-item label="零售价系数:" prop="retail_coefficient">
						<el-input v-model="infoForm.retail_coefficient" placeholder="请输入零售价系数" clearable></el-input>
					</el-form-item> -->
					<el-form-item label="出厂价系数:" prop="factory_coefficient">
						<el-input v-model="infoForm.factory_coefficient" placeholder="请输入出厂价系数" clearable></el-input>
					</el-form-item>
					<el-form-item label="佣金系数:" prop="commission_coefficient">
						<el-input v-model="infoForm.commission_coefficient" placeholder="请输入佣金系数" clearable></el-input>
					</el-form-item>
					<el-form-item label="保证金:">
						<el-input v-model="infoForm.bond_price" placeholder="请输入保证金" clearable></el-input>
					</el-form-item>
					<el-form-item label="已收保证金:">
						<el-input v-model="infoForm.bond_money" placeholder="请输入已收保证金" clearable></el-input>
					</el-form-item>
					<el-form-item label="接单权重:">
						<el-input v-model="infoForm.distribution_weight" placeholder="请输入接单权重" clearable></el-input>
					</el-form-item>
					<!-- <el-form-item label="客服:" prop="">
						<el-input v-model="infoForm.service_id" placeholder="请输入客服id(多客服用英文逗号隔开)" clearable></el-input>
					</el-form-item>
					<el-form-item label="排序:" prop="">
						<el-input v-model="infoForm.sort" placeholder="请输入排序" clearable></el-input>
					</el-form-item>
					<el-form-item label="关联工厂:" prop="" v-if="!is_subsidiary_corporation">
						<el-input v-model="infoForm.relation_sn" placeholder="请输入工厂编号,以英文逗号隔开" clearable></el-input>
						<span style="cursor: pointer;color: #34a1e0;" @click="openView">点这里快速选择工厂</span>
					</el-form-item> -->
					<!-- <el-form-item label="详细地址:" prop="address">
						<el-input v-model="infoForm.address" placeholder="请输入详细地址" clearable></el-input>
					</el-form-item>
					<el-form-item label="公司介绍:" prop="brief">
						<el-input v-model="infoForm.brief" placeholder="请输入公司介绍" type="textarea" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
					</el-form-item> -->
					<!-- <el-form-item label="材质:" prop="texture">
						<el-input v-model="infoForm.texture" placeholder="请输入材质" clearable></el-input>
					</el-form-item>
					<el-form-item label="定制:" prop="size">
						<el-input v-model="infoForm.size" placeholder="请输入定制" clearable></el-input>
					</el-form-item>
					<el-form-item label="货期:" prop="delivery">
						<el-input v-model="infoForm.delivery" placeholder="请输入货期"><i slot="suffix">天</i></el-input>
					</el-form-item>

					<el-form-item label="星级:" prop="">
						<el-input v-model="infoForm.star" placeholder="请输入星级" clearable></el-input>
					</el-form-item>

					<el-form-item label="推荐理由:" prop="reason">
						<el-input v-model="infoForm.reason" placeholder="请输入推荐理由" type="textarea" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
					</el-form-item>
					<el-form-item label="提示:" prop="tips">
						<el-input v-model="infoForm.tips" placeholder="请输入提示" clearable></el-input>
					</el-form-item> -->
					<!-- <el-form-item label="企业logo:" class="upload-box" prop="logo">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 1);}">
									<el-button type="primary" size="small">企业logo</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.logo">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="背景图片:" class="upload-box" prop="backgroud_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 2);}">
									<el-button type="primary" size="small">背景图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.backgroud_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="分类图片:" class="upload-box" prop="category_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request="function(res) {return upload(res, 3);}">
									<el-button type="primary" size="small">分类图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.category_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item>
					<el-form-item label="企业图片:" class="upload-box" prop="factory_img">
						<div class="factory-img-upload">
							<div class="factory-img-upload-btns">
								<el-upload ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(res, 4); } ">
									<el-button type="primary" size="small">企业图片</el-button>
								</el-upload>
								<div class="el-upload__tip">小于500KB</div>
							</div>
							<div class="factory-img-upload-imgs">
								<el-image :src="infoForm.factory_img">
									<div slot="error"></div>
								</el-image>
							</div>
						</div>
					</el-form-item> -->
					<el-button type="primary" style="margin-left: 38px;" @click="submitForm('infoForm')">保存</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	import affiliatedFactory from '@/components/layer-dialog/affiliated-factory.vue';
	import sonMixin from '@/utils/sonMixin';
	export default {
		mixins:[sonMixin],
		components: {
			affiliatedFactory
		},
		data() {
			return {
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				admin_id: localStorage.getItem('admin_id'),
				options: [{
						id: 1,
						name: '内部工厂'
					},
					{
						id: 2,
						name: '外部工厂'
					}
				],
				cityJson: '',
				cityList: '',
				areaList: '',
				factory_id: localStorage.getItem('factory_id'),
				factoryInfo: '',
				infoForm: {
					name: '',
					sort: 0,
					factory_name: '',
					contacts_name: '',
					phone: '',
					address: '',
					brief: '',
					logo: '',
					style: '',
					factory_style_sn: '',
					backgroud_img: '',
					factory_img: '',
					factory_id: '',
					relation_sn:'',
					category_img: '',
					is_factory: 1,
					service_id: '',
					type: '',
					reason: '',
					texture: '',
					delivery: '',
					size: '',
					self_coefficient:'',
					retail_coefficient:'',
					filiale_id:'',
					bank_account:'',
					bank_account_name:'',
					bank_deposit:'',
					bank_address:'',
					bank_type:'',
					advance_charge:'',
					pay_type:'',
					tips:'',
					factory_coefficient: '',
					commission_coefficient: '',
					bond_price: '',
					bond_money: '',
					distribution_weight: '',
				},
				// 校对规则
				infoFormRules: {
					type: [{
						required: true,
						message: '请选择类型'
					}],
					retail_coefficient:[{
						required:this.is_subsidiary_corporation?true:false,
						message:'请输入零售价系数'
					}],
					self_coefficient:[{
						required: this.is_subsidiary_corporation?true:false,
						message:"请输入自营价系数"
					}],
					pay_type:[{
						required:true,
						message:'请选择结算类型'
					}],
					factory_coefficient:[{
						required:true,
						message:'请输入出厂价系数'
					}],
					commission_coefficient:[{
						required:true,
						message:'请输入佣金系数'
					}],
					/* 		name: [{ required: true, message: '请输入企业名称' }],
							factory_name: [{ required: true, message: '请输入品牌名称' }],
							factory_style_sn: [{ required: true, message: '请输入风格' }],
							phone: [{ required: true, message: '请输入联系方式' }],
							address: [{ required: true, message: '请输入详细地址' }], */
				},
				filialeList:[],
				bankTypeList:[
					{
						id:0,
						label:'非招行'
					},
					{
						id:1,
						label:"招行"
					}
				],
				payTypeList:[
					{
						id:1,
						label:'预付款'
					},
					{
						id:2,
						label:'全款'
					},
					{
						id:3,
						label:'月结'
					}
				]
			};
		},
		methods: {
			// 初始化列表
			init() {
				let id = this.$route.query.id

				let data = {
					factory_id: this.factory_id,
				};

				if (id != undefined) {
					data.factory_id = id
					delete this.infoForm.is_factory
				}

				this.$http(this.$ApiList.FactoryInfo, data).then(res => {
					this.infoForm = res.datas;
					if(res.datas.pay_type == 0){
						this.infoForm.pay_type = ''
					}
				});
				// 获取子公司列表
				this.$http(this.$ApiList.FilialeItems,{order_by:'filiale_id',asc:1}).then(res=>{
					this.filialeList = res.datas
				})
			},
			// 图片上传
			upload(params, type) {
				const file = params.file,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt500KB = file.size / 1024 <= 500;
				if (!isJPGPNG) {
					this.$message.error("只能上传图片格式png、jpg!");
					return;
				}
				if (!isLt500KB) {
					this.$message.error("图片不能大于500K!");
					return;
				}
				const form = new FormData();
				form.append("file[]", file);

				switch (Number(type)) {
					case 1:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.logo = res.datas[0];
						})
						break;
					case 2:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.backgroud_img = res.datas[0];
						})
						break;
					case 3:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.category_img = res.datas[0];
						})
						break;
					case 4:
						this.$http(this.$ApiList.publicUpload, form).then(res => {
							this.infoForm.factory_img = res.datas[0];
						});
						break;

				}
			},
			//提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let id = this.$route.query.id
						if (id == undefined) {
							this.infoForm.is_factory = 1
						}
						let filiale_id = localStorage.getItem('filiale_id');
						if(filiale_id == 1 || !filiale_id){
							if (this.admin_id != 1 && this.admin_id != 6 && this.admin_id != 8 && this.admin_id != 23 && this.admin_id != 9 && this.admin_id != 4) {
								this.$layer.msg('你没有权限')
								return
							}
						}else if(filiale_id != 1){
							if(!this.is_subsidiary_corporation){
								this.$layer.msg('你没有权限')
								return
							}
						}
						
						this.$http(this.$ApiList.UpFactoryInfo, this.infoForm).then(res => {
							this.$layer.msg(res.datas)
							if (this.$route.query.id != undefined) {
								this.$router.push({
									path: '/factory_list'
								});
							}
						})
					} else {
						this.$layer.msg('请填写完整信息后提交')
					}
				});
			},
			openView() {
				this.$layer.iframe({
					title: '关联工厂',
					maxmin: true,
					area: ['50%', '60%'],
					content: {
						content: affiliatedFactory, //传递的组件对象
						parent: this, //当前的vue对象
						data: {} //props
					}
				});

			},
			unique(arr) {
				return Array.from(new Set(arr))
			},
			setRelationSn(factory_id) {
				if(this.infoForm.relation_sn){
					this.infoForm.relation_sn = this.infoForm.relation_sn + ',' + factory_id
				}else{
					this.infoForm.relation_sn =  factory_id
				}
				
				let arr = this.infoForm.relation_sn.split(',');
				let newArr = this.unique(arr)
				this.infoForm.relation_sn = newArr.join(',')
			}

		},
		created() {
			this.init();
			this.infoForm.factory_id = this.$route.query.id
		}
	};
</script>

<style lang="scss">
	.factory-info {

		.content-info {
			width: 700px;
			h3{
				margin-bottom: 10px;
			}
		}

		.upload-box .factory-img-upload {
			display: flex;
		}

		.upload-box .factory-img-upload .factory-img-upload-imgs .el-image {
			width: 140px;
			height: 140px;
			border: solid 1px #e5e5e5;
			margin-left: 25px;
			vertical-align: top;
		}

		.star-form-view .el-form-item__content {
			display: flex;
			height: 40px;
			align-items: center;
		}
	}
</style>
